<template>
    <view
        class="music-head"
        :style="{ color: color }"
    >
        <view
            v-if="showIcon"
            class="music-head-icon"
            :class="[{ 'head-icon-black': iconBlack }]"
        >
            <text
                class="iconfont iconzuojiantou-copy"
                @tap="handleToBack"
            ></text> | <text
                class="iconfont iconshouye"
                @tap="handleToHome"
            ></text>
        </view>
        {{ title }}
    </view>
</template>

<script>
    export default {
        name:"music-head",
        props: {
            title: {
                type: String,
                default: '',
                required: true
            },
            color: {
                type: String,
                required: true
            },
            showIcon: {
                type: Boolean,
                default: false,
                required: true
            },
            iconBlack: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
            };
        },
        methods: {
            handleToBack() {
                uni.navigateBack();
            },
            handleToHome() {
                uni.navigateTo({
                    url: '/pages/index/index',
                });
            }
        }
    }
</script>

<style scoped lang="scss">
.music-head {
    height: 75px;
    font-size: 16px;
    line-height: 80px;
    text-align: center;
    color: white;
    color: black;
    position: relative;
    
    &-icon {
        position: absolute;
        left: 8px;
        top: 26px;
        width: 90px;
        height: 30px;
        line-height: 30px;
        background: rgba($color: #000000, $alpha: .4);
        color: #fff;
        border-radius: 15px;
        display: flex;
        justify-content: space-evenly;
    }

    .head-icon-black {
        color: rgba($color: #000000, $alpha: .4);
        border: 1px solid #eaeaea;
        background: white;
    }
}
</style>
